<template>
    <div>
      <van-popup round v-model:show="show" position="bottom" :style="{ height: '80%', overflow: 'hidden' }" :close-on-click-overlay="true">
        <div class="popup-box">
          <ul class="item-list">
            <li
              class="item"
              v-for="item in itemOptions"
              :key="item.value"
              @click="handleItemSelect(item)"
              :class="{ 'selected': item.selected }"
            >
              <span>{{ item.text }}</span>
              <i v-if="item.selected" class="check-icon">✔</i>
            </li>
          </ul>
          <div class="popup-footer">
            <van-button type="default" @click="cancelSelection">取消</van-button>
            <van-button type="primary" @click="confirmSelection">确认</van-button>
          </div>
        </div>
      </van-popup>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, defineProps, defineEmits, watch } from "vue";
  
  const props = defineProps({
    title: {
      type: String,
      default: "选择项目", // 默认标题
    },
    itemList: {
      type: Array,
      required: true,
    },
  });
  
  const emit = defineEmits(["update"]);
  const show = ref(false);
  const title = ref(props.title);
  
  const itemOptions = reactive(
    [{ text: "全部", value: -1, selected: false }].concat(
      props.itemList.map((v: any) => ({
        text: v.Name,
        value: v.Id,
        selected: false,
      }))
    )
  );
  
  const selectedItems = ref<{ value: number; text: string }[]>([]);
  
  const handleItemSelect = (item: any) => {
    if (item.value === -1) {
      const selectAll = !item.selected;
      itemOptions.forEach((option) => (option.selected = selectAll));
      selectedItems.value = selectAll
        ? itemOptions.filter((option) => option.value !== -1).map((option) => ({
            value: option.value,
            text: option.text,
          }))
        : [];
    } else {
      item.selected = !item.selected;
      if (item.selected) {
        selectedItems.value.push({ value: item.value, text: item.text });
      } else {
        selectedItems.value = selectedItems.value.filter(
          (item) => item.value !== item.value
        );
      }
    }
  };
  
  const updateTitle = () => {
    if (selectedItems.value.length === 0) {
      title.value = props.title;
    } else {
      title.value = selectedItems.value.map((item) => item.text).join(", ");
    }
  };

  const cancelSelection = () => {
    selectedItems.value = [];
    itemOptions.forEach((item) => (item.selected = false));
    show.value = false;
  };
  
  const confirmSelection = () => {
    // updateTitle();
    show.value = false;
    emit("update", selectedItems.value);
  };
  
  const open = () => {
    show.value = true;
  };
  
  watch(
    () => props.itemList,
    (newItemList) => {
      itemOptions.splice(1, itemOptions.length - 1);
      itemOptions.push(
        ...newItemList.map((v: any) => ({
          text: v.Name,
          value: v.Id,
          selected: v.selected || false,
        }))
      );
      const selected = itemOptions.filter((item) => item.selected);
      if (selected.length > 0) {
        selectedItems.value = selected.map((item) => ({
          value: item.value,
          text: item.text,
        }));
        emit("update", selectedItems.value);
      }
    }, {
      deep: true
    }
  );
  
  defineExpose({
    open,
  });
  </script>
  
  <style scoped>
  .popup-box {
    @apply py-[5px];
    overflow: hidden;
    height: 100%;
  }
  
  .item-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: calc(100% - 80px);
    overflow-y: auto;
  }
  
  .popup-box .item {
    @apply h-[50px] text-[14px] text-center leading-[50px] border-solid border-b-[1px] border-[#E4E4E4];
    cursor: pointer;
    padding: 0 10px;
  }
  
  .popup-box .item.selected {
    background-color: #f0f0f0;
  }
  
  .check-icon {
    font-size: 16px;
    color: green;
  }
  
  .popup-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    position: sticky;
    bottom: 0;
    background-color: #fff;
    z-index: 10;
  }
  
  .popup-footer .van-button {
    flex: 1;
    margin: 0 5px;
  }
  </style>
  